<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../include/admincontent.jsp" %>
<style type="text/css">
    td {
        padding-left: 45px !important;
    }
</style>
<div id="Content">
    <div class="help" style="margin-bottom:0;">
        <b>我的代办事项：</b><br>
    </div>
<%--    <table class="treeTable" style="border:0;">--%>
<%--        <tbody>${links}</tbody>--%>
<%--    </table>--%>
    <div class="charts-content">
        <div class="first-line">
            <div class="left-part">
                <p class="title-p">人数总览</p>
                <div id="chartC"></div>
            </div>
            <div class="right-part chart-a">
                <p class="title-p">历年通过情况</p>
                <div id="chartA"></div>
            </div>
        </div>

        <div class="second-line chart-b">
            <div class="title-p vertical-mid">
                <span>各节点历年通过情况</span>
                <div class="layui-inline search-line">
                    <label class="layui-form-label">年份：</label>
                    <div class="layui-input-inline">
                        <select class="select-lys" name="year">
                            <c:forEach var="year" items="${yearList}">
                                <option value="<c:out value="${year}" />">
                                    <c:out value="${year}"/>
                                </option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline search-line vertical-mid">
                    <label class="layui-form-label">招聘方案：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code">
                    </div>
                </div>
                <div class="layui-inline search-line" id="chartBrefresh">
                    <button class="layui-btn">查询</button>
                </div>
            </div>
            <div id="chartB"></div>
        </div>


        <%--<div class="second-line chart-b">
            <div class="title-p vertical-mid">
                <span>历年简历投递情况</span>
                <div class="layui-inline search-line">
                    <label class="layui-form-label">年份：</label>
                    <div class="layui-input-inline">
                        <select class="select-lys" name="year">
                            <c:forEach var="year" items="${yearList}">
                                <option value="<c:out value="${year}" />">
                                    <c:out value="${year}"/>
                                </option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-inline search-line vertical-mid">
                    <label class="layui-form-label">招聘方案：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code">
                    </div>
                </div>
                <div class="layui-inline search-line" id="chartDrefresh">
                    <button class="layui-btn">查询</button>
                </div>
            </div>
            <div id="chartD" style="min-width:400px;height:400px"></div>
        </div>--%>
    </div>
</div>
<style type="text/css">
    .vertical-mid {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;

    }
</style>

<script type="text/javascript" src="<%=basepath%>/resources/js/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/data.js"></script>
<script type="text/javascript" language="javascript">
    $(function () {

        let data = {
            years: ${years},
            data: {
                passed: ${passed},
                unPassed: ${unpassed}
            }
        }


        let options = {
            chart: {
                type: 'column',
                height: 350,
            },
            credits: {
                enabled: false,
            },
            title: {
                text: '',
            },
            xAxis: {
                categories: data.years,
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数 (人)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}年</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                }
            },
            series: [{
                name: '通过',
                data: data.data.passed,
                color: '#2490F8'
            }, {
                name: '不通过',
                data: data.data.unPassed,
                color: '#F7A35C'
            }]
        }

        let chartA = Highcharts.chart('chartA', options)

        // 接口返回的数据结构  根据搜素条件 方案id 或者年份返回对应的数据
        let dataB = {
            nodes: ['节点A', '节点B', '节点C', '节点D', '节点E', '节点F', '节点G', '节点H', '节点I'],
            data: {
                passed: [49, 71, 106, 129, 144, 176, 135, 148, 216],
                unPassed: [83, 78, 98, 93, 106, 84, 105, 104, 91]
            }
        }

        let optionsB = {
            chart: {
                type: 'column',
                height: 350,
            },
            credits: {
                enabled: false,
            },
            title: {
                text: '',
            },
            xAxis: {
                categories: dataB.nodes,
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数 (人)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}年</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0; text-align: left;">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                }
            },
            series: [{
                name: '通过',
                data: dataB.data.passed,
                color: '#2490F8'
            }, {
                name: '不通过',
                data: dataB.data.unPassed,
                color: '#F7A35C'
            }]
        }

        let chartB = Highcharts.chart('chartB', optionsB)

        let dC = ${total};
        // 接口返回的数据结构
        let dataC = {
            '当前注册人数': dC[0],
            '人才库总人数': dC[1],
            '校招应聘人数': dC[2],
            '社招应聘人数': dC[3],
        }

        let dd = []
        let keys = Object.keys(dataC)
        keys.forEach((v, i) => {
            let res = new Array(keys.length).fill(null)
            res[i] = dataC[v]
            dd.push({
                name: v,
                data: res
            })
        })

        let optionsC = {
            chart: {
                type: 'column',
                height: 350,
            },
            credits: {
                enabled: false,
            },
            title: {
                text: '',
            },
            xAxis: {
                categories: Object.keys(dataC),
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人数 (人)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}年</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0; text-align: left;">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                },
                series: {
                    stacking: 'normal'
                }
            },
            series: dd
        }

        console.log('dd ->', dd)

        let chartC = Highcharts.chart('chartC', optionsC)

        $("select[name='year']")
            .change(() => {
                refreshChartB();
            });
        $("#chartBrefresh")
            .on('click', ()=>refreshChartB());
        refreshChartB();

        function refreshChartB() {
            let code = $("#Content > div.charts-content > div.second-line.chart-b > div.title-p > div:nth-child(3) > div > input[type=text]").val()
            let year = $("select[name='year']").val();
            $.ajax({
                url: "/chartB?proid=" + code + "&year=" + year,
                success: (data)=>{
                    chartB.xAxis[0].update({categories: data.xAxis});
                    chartB.series[0].update({
                        name: '通过',
                        data: data.passed,
                        color: '#2490F8'
                    })
                    chartB.series[1].update({
                        name: '不通过',
                        data: data.unPassed,
                        color: '#F7A35C'
                    })
                },
                error: (xhr, status, err)=>{
                    console.log(err);
                }
            })
        }

        $("#chartDrefresh").on('click',()=>refreshChartD());

        function refreshChartD(){
            var chart = Highcharts.chart('chartD', {
                title: {
                    text: '2020年社会招聘简历投递情况'
                },
                subtitle: {
                    text: '数据来源：'
                },
                yAxis: {
                    title: {
                        text: '应聘人数'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2010
                    }
                },
                series: [{
                    name: '安装，实施人员',
                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                }, {
                    name: '工人',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, {
                    name: '销售',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, {
                    name: '项目开发',
                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                }, {
                    name: '其他',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        }
    })
</script>
</body>
</html>